/**
 * 需要优化
 * 1、脚手架换
 * 2.用了太多style、要会https://www.tailwindcss.cn/
 * 3、各个图标写成组件
 * 4、做个定时轮动
 * 5、主题颜色、标题去掉、中间显示高德地图
 * 6、数字滚动
 */
<template>
  <div>
    <v-scale-screen fullScreen width="1920" height="1080">
      <!-- 头部 -->
      <div class="border head">head</div>

      <!-- 中间容器 -->
      <div class="content">
        <!-- 左侧 -->
        <div class="fullWH left">
          <!-- 雷达图 -->
          <div class="border" style="height: 40%;">
            <div ref="radar" style="width:478px;height: 382px;"></div>
          </div>
          <!-- 圆柱图 -->
          <div class="border" style="height: 60%;">
            <div ref="cylinder2" style="width:478px;height: 582px;"></div>
          </div>
        </div>
        <!-- 中间 -->
        <div class="fullWH center">
          <!-- 桑基图 -->
          <div class="border" style="height: 70%;">
            <div ref="sankey" style="width:1108px;height: 652px;"></div>
          </div>
          <!-- 折线图 -->
          <div class="border" style="height: 30%;">
            <div id="line" style="width:990px;height: 322px;"></div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="fullWH right">
          <!-- 进度环 -->
          <div class="border" style="height: 30%;">
            <!-- <i-circle :percent="80" dashboard>
              <span class="demo-circle-inner" style="font-size:34px">80%</span>
            </i-circle> -->
            <i-circle :size="270" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square"
              stroke-color="#5cb85c">
              <div class="demo-Circle-custom">
                <h1>42,001,776</h1>
                <p>消费人群规模</p>
                <span>
                  总占人数
                  <i>75%</i>
                </span>
              </div>
            </i-circle>
          </div>
          <!-- 散点图 -->
          <div class="border" style="height: 40%;">
            <div ref="scatter" style="width:478px;height: 402px;"></div>
          </div>
          <!-- 横向圆柱图 -->
          <div class="border" style="height: 30%;">
            <div ref="cylinder" style="width:478px;height: 282px;"></div>
          </div>
        </div>
      </div>
    </v-scale-screen>
  </div>
</template>

<script>

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    console.log("xx",process.env.VUE_APP_URL)
    console.log("xx",process.env.NODE_ENV)
    this.drawLineChart();
    this.drawRadarChart();
    this.drawCylinder();
    this.drawSankey();
    this.drawScatter();
  },
  props: {
    colorObj: {
      type: Object,
      default: function () {
        return {
          textStyle: "#3fc0fb",
          series: {
            color: ["#00bcd44a", "transparent"],
            dataColor: {
              normal: "#03a9f4",
              shadowColor: "#97e2f5"
            }
          }
        };
      }
    }
  },
  methods: {
    // 折线图
    drawLineChart() {
      // let myChart = this.$echarts.init(document.getElementById('echarts'));
      let myChart = this.$echarts.init(document.getElementById('line'), null, { renderer: 'svg' })
      let option = {
        title: {
          text: 'hello world',
          textStyle: {
            fontWeight: "bold",
            color: '#fff',
            fontSize: 12
          }
        },
        // 鼠标移入hover'tip
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          // x轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        yAxis: {
          type: 'value',
          // y轴线的颜色以及宽度
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            smooth: true
          },
          {
            data: [218, 135, 147, 260, 150, 230, 224,],
            type: 'line',
            smooth: true
          }
        ]
      };
      myChart.setOption(option);
    },
    // 雷达图
    drawRadarChart() {
      let myChart2 = this.$echarts.init(this.$refs.radar, null, { renderer: 'svg' })
      let option = {
        title: {
          text: 'Basic Radar Chart',
          // 上面标题的字体
          textStyle: {
            fontWeight: "bold",
            color: '#fff',
            fontSize: 12
          }
        },
        // 鼠标移入hover'tip
        tooltip: {
          show: true,
        },
        // 下面颜色分类标识
        legend: {
          data: ['Allocated Budget', 'Actual Spending'],
          bottom: 0,
          itemGap: 20,
          // 字体
          textStyle: {
            color: '#fff',
            fontWeight: "bold",
            fontSize: 14
          },
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
          ],
          // 图标上面的字体
          axisName: {
            color: '#fff',
            // fontWeight: "bold",
          },
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget',
                // itemStyle: {
                //   color: '#F9713C'
                // },  
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ],
          }
        ]
      };
      myChart2.setOption(option);
    },
    // 圆柱图
    drawCylinder() {
      let myChart = this.$echarts.init(this.$refs.cylinder, null, { renderer: 'svg' })
      let option = {
        title: {
          text: 'normal',
          textStyle: {
            fontWeight: "bold",
            color: '#fff',
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(333, 333, 0, 0.2)', // 柱条的颜色
              borderColor: 'red', // 柱条的描边颜色
              borderWidth: 1, // 柱条的描边宽度，默认不描边
              borderType: 'dashed', // 柱条的描边类型，默认值'solid'；可取值'solid', 'dashed', 'dotted'
            },
          }
        ]
      }
      myChart.setOption(option);

      let myChart2 = this.$echarts.init(this.$refs.cylinder2, null, { renderer: 'svg' })
      let option2 = {
        // 标题
        title: {
          text: 'World Population',
          textStyle: {
            fontWeight: "bold",
            color: '#fff',
            fontSize: 12
          }
        },
        // 鼠标移入hover'tip
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // 图例
        legend: {
          textStyle: {
            fontWeight: "bold",
            color: '#fff',
            fontSize: 12
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230],
            emphasis: {// 高亮-鼠标移入图例-圆柱体上面显示数量的样式
              label: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontWeight: 'bold'
                }
              }
            },
          },
          {
            name: '2012',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807],
            emphasis: {// 高亮
              label: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontWeight: 'bold'
                }
              }
            }
          }
        ]
      }
      myChart2.setOption(option2);
    },
    // 桑基图
    drawSankey() {
      let myChart = this.$echarts.init(this.$refs.sankey, null, { renderer: 'svg' })
      let option = {
        title: {
          text: 'Sankey Diagram',
          textStyle: {
            fontWeight: "bold",
            color: '#fff',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'sankey',
            data: [
              {
                name: 'a'
              },
              {
                name: 'b'
              },
              {
                name: 'a1'
              },
              {
                name: 'a2'
              },
              {
                name: 'b1'
              },
              {
                name: 'c'
              }
            ],
            links: [
              {
                source: 'a',
                target: 'a1',
                value: 5
              },
              {
                source: 'a',
                target: 'a2',
                value: 3
              },
              {
                source: 'b',
                target: 'b1',
                value: 8
              },
              {
                source: 'a',
                target: 'b1',
                value: 3
              },
              {
                source: 'b1',
                target: 'a1',
                value: 1
              },
              {
                source: 'b1',
                target: 'c',
                value: 2
              }
            ],
            emphasis: {
              focus: 'adjacency'
            },
            levels: [
              {
                depth: 0,
                itemStyle: {
                  color: '#fbb4ae'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              },
              {
                depth: 1,
                itemStyle: {
                  color: '#b3cde3'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              },
              {
                depth: 2,
                itemStyle: {
                  color: '#ccebc5'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              },
              {
                depth: 3,
                itemStyle: {
                  color: '#decbe4'
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.6
                }
              }
            ],
            lineStyle: {
              curveness: 0.5
            }
          }
        ]
      }
      myChart.setOption(option);
    },
    // 散点图
    drawScatter() {
      let myChart = this.$echarts.init(this.$refs.scatter, null, { renderer: 'svg' })
      let option = {
        title: {
          text: 'drawScatter',
          textStyle: {
            fontWeight: "bold",
            color: '#fff',
            fontSize: 12
          }
        },
        tooltip: {
          position: 'top'
        },
        // visualMap: {
        //   type: 'piecewise',
        //   top: 'middle',
        //   min: 0,
        //   max: CLUSTER_COUNT,
        //   left: 10,
        //   splitNumber: CLUSTER_COUNT,
        //   dimension: DIENSIION_CLUSTER_INDEX,
        //   pieces: pieces
        // },
        grid: {
          left: 120
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid"
            }
          },
        },
        series: {
          type: 'scatter',
          encode: { tooltip: [0, 1] },
          symbolSize: 15,
          itemStyle: {
            borderColor: '#555'
          },
          datasetIndex: 1,
          symbolSize: 20,
          data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68]
          ],
        }
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.border {
  border: 1px solid salmon;
}

.head {
  width: 100%;
  height: 10%;
}

.content {
  display: flex;
  width: 100%;
  height: 90%;

  .fullWH {
    // width:100%;
    height: 100%;
  }

  .left {
    width: 25%;
  }

  .center {
    width: 50%;
  }

  .right {
    width: 25%;
  }
}

.demo-Circle-custom {
  & h1 {
    color: greenyellow;
    font-size: 28px;
    font-weight: normal;
  }

  & p {
    color: salmon;
    font-size: 14px;
    margin: 10px 0 15px;
  }

  & span {
    display: block;
    padding-top: 15px;
    color: palegreen;
    font-size: 14px;

    &:before {
      content: '';
      display: block;
      width: 50px;
      height: 1px;
      margin: 0 auto;
      background: sandybrown;
      position: relative;
      top: -15px;
    }

    ;
  }

  & span i {
    font-style: normal;
    color: yellow;
  }
}
</style>